<template>
  <div style="margin-top: 10px">
    <div style="width: 100%;text-align: center">
      <span style="margin-right: 100px;font-size: 20px">散样信息</span>
      <el-date-picker
          v-model="selectYears"
          type="yearrange"
          range-separator="To"
          start-placeholder="Start Year"
          end-placeholder="End Year"
      /><el-button @click="handleQuery" :icon="Search" circle />
    </div>

    <v-chart v-on:click="handleClick" ref="chart" class="chart" style="height: 350px" :option="optionBar" autoresize />
    <el-dialog ref="dialog" width="80%" v-model="openDia">
      <ht ref="htref"/>
    </el-dialog>
  </div>
</template>
<script setup>
import { Search } from '@element-plus/icons-vue'
import VChart from 'vue-echarts';
import useHomeStore from "@/store/modules/home.js";
import {getHT} from "@/api/home/home.js";
import Ht from "@/views/home/ht.vue";

const chart=ref(null);
const optionBar = ref(null);
const currYear = new Date().getFullYear();
let tdate=new Date().setFullYear(currYear-2);
const selectYears=ref([new Date(tdate), new Date()]);
let years = [currYear - 2,currYear - 1,currYear];
let htNum = [];
let htPrice = [];

const openDia=ref(false);
const htref=ref(null);

const handleYears=(years)=>{
  let res=[]
  for(let y of years){
    res.push(y+'年');
  }
  return res;
}
const handleClick=(param)=>{
  console.log(param)
  let y=param.value.substring(0,param.value.length-1);
  console.log(y);
  openDia.value=true;
  setTimeout(()=>{
    htref.value.setYearAndType(y,'SY');
    htref.value.getList();
  },500);
}
const handleQuery=()=>{
  let startYear = selectYears.value[0].getFullYear();
  let endYear = selectYears.value[1].getFullYear();
  getHT("SY",startYear,endYear).then(res=>{
    years=[]
    let tmap = res.data;
    htNum=[]
    htPrice=[]
    for (let i = startYear; i <= endYear; i++) {
      years.push(i);
      htNum.push(tmap[i]==null?0:tmap[i]['SYSL']==null ? 0 : tmap[i]['SYSL']);
      htPrice.push(tmap[i]==null?0:tmap[i]['SYJE']==null ? 0 : tmap[i]['SYJE']/10000/10000);
    }
    chart.value.setOption(option());
  })
}


const labelOption = {
  show: true,
  position: 'top',
  distance: '15',
  align: 'center',
  verticalAlign: 'top',
  rotate: '0',
  formatter: '{name|{a}}: {c}',
  fontSize: 16,
  rich: {
    name: {}
  }
};

const option =()=>{
  return{
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['合同数量', '合同金额（万元）']
  },
  color:[
      '#f3a449','#34a6ef'
  ],
  toolbox: {
    show: true,
    orient: 'vertical',
    left: 'right',
    top: 'center',
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar', 'stack'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  xAxis: [
    {
      type: 'category',
      axisTick: { show: false },
      data: handleYears(years),
      triggerEvent: true,
      axisLabel:{
        textStyle:{
          fontSize: '20px'
        }
      }
    },
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '合同数量',
      type: 'bar',
      barGap: 0,
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: htNum
    },
    {
      name: '合同金额（万元）',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: htPrice
    }
  ]
}};

handleQuery();
</script>

<style scoped lang="scss">

</style>